<template>
	<view class="fullPage">
		<view class="container plr30 pt20">
			<view class="header_w h300 mb70 b-primary border-r1">
				<view class="header_img">
					<image src="/static/bg_wdqb.png" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="pos_r flex_aj column pw100 ph100 cf">
					<view class="h60 ft36">{{ (list.balance + list.giveMoney).toFixed(2) }}</view>
					<view class="">账户总余额(元）</view>
				</view>
			</view>
			<view class="plr30 bf border-r1">
				<view class="flex_sb h90 bdb">
					<text>余额</text>
					<text>{{ list.balance.toFixed(2) }}元</text>
				</view>
				<view class="flex_sb h90 bdb">
					<text>赠送金额</text>
					<text>{{ list.giveMoney.toFixed(2) }}元</text>
				</view>

				<!-- <view class="flex ptb20" v-if="!isMany">
					<view class="flex1 flex_a">
						<text class="whn" v-for="(item,index) in info" :key="item.userId">{{item.agentName}}</text>
						<view class="plr20"
							@click="routerLink({ path: '/pages/user/service/detail', query: { type: 1 } })">
							<u-icon name="question-circle" color="#999" size="30"></u-icon>
						</view>
					</view>
					<view class="tae primary"><text
							@click="routerLink({ path: '/pages/user/wallet/depositDetail' })">押金明细</text></view>
				</view> -->
			</view>

			<view class="titiess" v-if="isMany">
				<view>
					钱包具体明细：
				</view>

				<view class=" tae primary wenhao">
					<view class="plr10" @click="routerLink({ path: '/pages/user/service/detail', query: { type: 1 } })">
						<u-icon name="question-circle" color="#999" size="30"></u-icon>
					</view>
					<!-- <text @click="routerLink({ path: '/pages/user/wallet/depositDetail' })">押金明细</text> -->
				</view>
			</view>
			<!-- <view class="trs bg-ws">
			<view class="th th1">代理商</view>
			<view class="th th2">余额</view>
			<view class="th th4">赠送金额</view>
			<view class="th ">电池押金</view>
			<view class="th th3">车辆押金</view>
		</view> -->
			<view class="table" v-if="isMany">
				<view class="tr bg-w">
					<view class="th th1">商户名称</view>
					<view class="th th2">余额</view>
					<view class="th th4">赠送金额</view>
					<!-- view class="th ">电池押金</view>
					<view class="th th3">车辆押金</view> -->
				</view>
				<block v-for="(item,index) in info" :key="item.userId" class="">
					<!-- //v-if="index % 2 == 0" -->
					<view class="blockss">
						<view class="tr bg-g">
							<view class="td td1">{{item.agentName}}</view>
							<view class="td">{{item.balance}}</view>
							<view class="td">{{item.giveMoney}}</view>
							<!-- <view class="td">{{item.deposit}}</view>
							<view class="td">{{item.carDeposit}}</view> -->
						</view>
						<!-- <view class="tr" v-else>
					<view class="td">{{item.code}}</view>
					<view class="td">{{item.text}}</view>
					<view class="td">{{item.type}}</view>
				</view> -->
					</view>

				</block>
			</view>
			<view v-if="isMany" class="commercialTenantFooterText">
				上下滑动查看商户
			</view>

			<view class="mb100 plr100 isManys">
				<view class="mb30">
					<u-button type="primary" shape="circle"
						@click="routerLink({ path: '/pages/user/wallet/recharge' })">
						立即充值</u-button>
				</view>
				<u-button type="primary" plain shape="circle"
					@click="routerLink({ path: '/pages/user/wallet/balanceDetail' })">账户明细</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBalance
	} from '@/api/user.js'
	export default {
		name: 'wallet',
		data() {
			return {
				isMany: false, //控制多个代理商显示的变量
				info: [],
				list: {
					balance: 0, //余额
					giveMoney: 0, //赠送金额
					deposit: 0, //电池押金
					carDeposit: 0, //车辆押金
				},

			}
		},
		onLoad() {},
		onShow() {
			this.isMany = false
			this.getBalance()
			setTimeout((item) => {
				console.log('1254458877');
				if (this.info.length <= 1) {
					this.isMany = false
					console.log('1111++++++++++++++++++++');
				}
				if (this.info.length > 1) {
					this.isMany = true
					console.log('222++++++++++++++++++++');
				}
			}, 1000)
		},
		computed: {
			// userInfo () {
			// 	return this.$store.state.user.userInfo || {}
			// }
		},
		methods: {
			async getBalance() {
				const res = await getBalance()
				this.info = res.data
				console.log('+++++++++', this.info);
				this.list.balance = 0
				this.list.giveMoney = 0
				this.list.deposit = 0
				this.list.carDeposit = 0
				this.info.forEach((item) => {
					this.list.balance += item.balance
					this.list.giveMoney += item.giveMoney
					this.list.deposit += item.deposit
					this.list.carDeposit += item.carDeposit
					// this.info.push(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_w {
		position: relative;

		.header_img {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			height: 300upx;
			width: 100%;
		}
	}

	.table {
		border: 0px solid darkgray;
		position: relative;
		top: 2%;
		left: 0px;
		right: 20px;
		height: 200px;
		overflow-y: scroll;


	}

	.tr {
		display: flex;
		width: 100%;
		justify-content: center;
		height: 3rem;
		align-items: center;
	}

	.td {
		width: 40%;
		justify-content: center;
		text-align: center;
	}

	.trs {
		display: flex;
		width: 100%;
		justify-content: center;
		height: 3rem;
		align-items: center;
	}

	.bg-ws {
		// background: snow;
		display: flex;
		justify-content: space-around;
		background: #3282ff;
		// border: 1px solid #565656;
		position: fixed;
		top: 335px;
		// right: 10px;
		// left: 10px;
	}

	.bg-w {
		// background: snow;
		display: flex;
		justify-content: space-around;
		background: #3282ff;
		// border: 1px solid #565656;
		// position: fixed;
		// right: 0px;
		// left: 0px;



	}

	.bg-g {
		background: #E6F3F9;


	}

	.blockss {
		// position: fixed;
		// // right: 0px;
		// // left: 0px;
		// margin-top: 50px;
	}

	.th {
		// width: 20%;
		// border: 1px solid #565656;
		justify-content: center;
		background: #3282ff;
		color: #fff;
		display: flex;
		height: 100%;
		align-items: center;
		font-size: 12px;
	}

	.th1 {
		margin-left: 4px;
	}

	.th2 {
		margin-left: 13px;
	}

	.th3 {
		// margin-right: 14px;
	}

	.th4 {
		margin-left: 12px;
	}

	.td1 {
		font-size: 12px;

	}

	.titiess {
		margin-top: 18px;
		color: #888;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.wenhao {
		display: flex;
		justify-content: flex-start;
	}

	.isManys {
		margin-top: 50px
	}

	.commercialTenantFooterText {
		text-align: center;
		margin-top: 13px;
		color: #bbb;
	}
</style>
